<template>
  <li class="node list-item" data-type="0">
    <template v-if="root !==0 && nodes !== 1">
      <span class="line"></span>
    </template>
    <div class="contanier flex">
      <div class="small-panel flex">
        <span class="label">[推荐人数]</span>
        <span class="txt">{{model.downline}}</span>
      </div>
      <div class="body-panel flex">
        <div class="title">
          <i v-if="HasChild" class="arrow" :class="isOpenOrClose" @click="openExpand(model)"></i>
          <i class="t-icon m-dep"></i>
          {{model.name}}
        </div>
        <div class="time" @click="handlelookDetails(model)">详情</div>
      </div>
      <div class="bottom-panel flex">
        <div class="left-wrap flex">
          <span class="label">[返利]</span>|<span class="txt color-red">{{model.rebate_total | unitPrice('¥') }}</span>
        </div>
      </div>
    </div>
    <template v-if="HasChild && this.model.isExpand">
      <ul class="box">
        <tree-item v-for="(m, i) in model.item" :key="String('child_node'+i)" :num='i' :root="1" @openExpand="openExpand" @delAction="delAction" :nodes.sync="model.item.length" :model.sync="m"></tree-item>
      </ul>
    </template>
  </li>
</template>

<script>
export default {
  name: 'treeItem',
  props: ['model', 'num', 'nodes', 'root'],
  data() {
    return {
      treeDataSource: []
    }
  },
  watch: {
    model: {
      handler() {
        // console.log('监听子组件：', this.model)
      },
      deep: true
    }
  },
  computed: {
    HasChild() {
      return this.model.item.length > 0
    },
    isOpenOrClose() {
      return this.model.isExpand ? 'open' : 'close'
    }
  },
  methods: {
    openExpand(m) {
      this.$emit('openExpand', m)
    },
    //删除
    delAction(m) {
      this.$emit('delAction', m)
    },
    handlelookDetails(m) {
      this.$router.push({path: '/member/distribution/my-performance', query: {member_id: m.id}})
    }
  }
}
</script>

<style type="text/scss" lang="scss">
  .color-red{
    color: #f42424;
  }
  .flex {
  display: flex;
  justify-content: flex-start;
}
  .contanier {
  padding-left: 26px;
  padding-right: 10px;
  flex-direction: column;
  .small-panel {
    margin-top: 5px;
  }
  .small-panel,
  .bottom-panel {
    flex-direction: row;
    height: 20px;
    font-size: 8px;
    color: #333;
  }
  .body-panel {
    height: 24px;
    flex-direction: row;
    justify-content: space-between;
    .title {
      position: relative;
      .arrow {
        position: absolute;
        width: 0;
        height: 0;
        left: -13px;
        border-style: solid;
        z-index: 1;
        &.close {
          border-width: 6px 0 6px 6px;
          border-color: transparent transparent transparent #aaa;
        }
        &.open {
          top: 4px;
          border-width: 6px 6px 0;
          border-color: #aaa transparent transparent;
        }
      }
    }
    .time {
      font-size: 14px;
      color: #ff853f;
    }
    .t-icon {
      display: inline-block;
      width: 18px;
      height: 18px;
      background-size: 100% 100% !important;
      vertical-align: middle;
      margin: -3px 2px 0 0;
      &.m-dep {
        background: url();
      }
    }
  }
}
</style>
